<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
      vue中如何绑定事件
      1. 鼠标事件
      2. 键盘事件

 需求:  如何实现单击按钮  改变age 的值
      1.  绑定按钮的单击事件
         js:
           1. 获取节点对象
           2. 绑定事件类型   单击  双击  移入移出
           3. 绑定回调函数    处理事件

           v-on:事件名="回调函数"   --简化->  @事件名="函数名"

           let  a = 1
              a+=1

      2. 在事件处理中改变age的值


 vm 实例分析
   1.  在初始化vm实例时 配置参数data中的属性,会在vm实例身上代理一份   数据代理  get  set
   2. 通过vm.age 访问属性值时  会调用对用的get方法 获取data属性中对应的值
   3. 通过vm.age = 10 改变age属性值时  会调用对用的set方法 改变data属性中对应的值
   4.  methods 属性中定义的函数使用this关键词时,this指向的是vm实例 所以访问 age 时也可以使用this.age
   5.  需要使用data中的属性值时 除了通过vm.age ,this.age访问之外,还可以通过vn._data.age方式访问

-->

<div id="app">
    <h1>{{age}}</h1>
    <button v-on:click="age+=1">单击</button>
    <button v-on:click="addAge">单击</button>
<!--    事件绑定的简写形式  @  替代 v-on -->
    <button @click="addAge2">单击</button>
    <button @click="addAgeByStep(2)">单击+2</button>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            age:20,
            info:'hello'
        },
        methods:{  // 编写函数位置
            addAge: function () { // 改变age
                this.age +=1
                // console.log(vm)
                // // this
                // console.log(this)
                // console.log(this==vm)    //  true    vm就是 this
                //
                //
                // console.log(vm.age)
                // console.log(vm.info)
                //
                // console.log(this.age)
                // console.log(this.info)
                //
                //
                // console.log(vm._data.age)
                // console.log(vm._data.info)
            },
            // ES6中支持的语法
            addAge2(){
                this.age+=1
            },
            addAgeByStep(num){
                this.age+=num
            }
        }
      })
</script>

</body>
</html>